<template>
	<view class="content">
		<view class="bannerBG">
			 <swiper :indicator-active-color="indicator_active_color" :circular="circular" :interval="interval" :autoplay="autoplay" :indicator-dots="indicator_dots" class="pictrue">
			 	<swiper-item v-for="(item,i) in banner" :key="i">
					<image :src="item.picTranslateText" mode=""></image>
				</swiper-item>
			 </swiper>
		</view>
		
		<view class="msgContent">
			<view class="msgLeft">
				<image class="titleImage" src="../../static/index/msg.png" mode="scaleToFill"></image>
				<!-- <text class="msgcontent" v-for="(item,i) in notice" :key=i>{{item.noticeTitle}}</text> -->
				<gbro-marquee broadcastType='text' @changeEvent='msgTap' direction="top" :viewHeight="40"
				         :broadcastIconIsDisplay="!true" :touchEvent="true" :broadcastData='noticeTitles' :broadcastStyle='broadcastStyle'
				         style="width: 100%;margin-left: 20upx;">
				        </gbro-marquee>
			</view>
			<navigator class="more" url="msgList" >更多>></navigator>
		</view>
		
		<view class="stastic" style="justify-content: space-around;">
			<template >
				<view class="item" > 
				
					<view class="topBage" style="display: flex;">
						<!-- <view class="bage" style="background-color:red"></view> -->
						<image class="bage" src="../../static/index/bian.png" mode=""></image>
						<text style="margin-left: 4upx;" class="textaligin title">币安网价格</text>
					</view>
					<text class="count textaligin">{{filPrice.priceBn || 0.00}}</text>
					<text v-if="filPrice.changeBn>=0" class="up textaligin">{{filPrice.changeBn || 0.00}}</text>
					<text v-if="filPrice.changeBn<0" class="down textaligin">{{filPrice.changeBn || 0.00}}</text>
				
				 </view>
				<view class="item" >
					<view class="topBage" style="display: flex;">
						<!-- <view class="bage" style="background-color: orange"></view> -->
						<image class="bage" src="../../static/index/huobi.png" mode=""></image>
						<text style="margin-left: 4upx;" class="textaligin title">火币网价格</text>
					</view>
					<text class="count textaligin">{{filPrice.priceHuobi || 0.00}}</text>
					<text v-if="filPrice.changeHuobi>=0" class="up textaligin">{{filPrice.changeHuobi || 0.00}}</text>
					<text v-if="filPrice.changeHuobi<0" class="down textaligin">{{filPrice.changeHuobi || 0.00}}</text>
				
				 </view>
				<view class="item" >
					<view class="topBage" style="display: flex;">
						<!-- <view class="bage" style="background-color: green"></view> -->
						<image class="bage" src="../../static/index/okex.png" mode=""></image>
						<text style="margin-left: 4upx;" class="textaligin title">OKEX网价格</text>
					</view>
					<text class="count textaligin">{{filPrice.priceOkex || 0.00}}</text>
					<text v-if="filPrice.changeOkex>=0" class="up textaligin">{{filPrice.changeOkex || 0.00}}</text>
				 	<text v-if="filPrice.changeOkex<0" class="down textaligin">{{filPrice.changeOkex || 0.00}}</text>
				
				 </view>
			</template>
		</view>
		
		<view class="segHeader">
			<image class="segImage" src="../../static/index/service.png" mode="scaleToFill"></image>
			<text class="segTitle">平台服务</text>
		</view>
		
		<view class="welfare">
			<template v-for="(info,i) in service">
				
				<view class="item" :key=i @tap="serviceSelected(info)">
					<view class="border">
						<image class="img" :src="info.icon"></image>
					</view>
					<text class="txt">{{info.name}}</text>
				</view>
			</template>
		</view>
		
		<view class="segHeader">
			<image class="segImage" src="../../static/index/data.png" mode="scaleToFill"></image>
			<text class="segTitle">FILI官方数据</text>
		</view>
		
		<view class="welfare" style="justify-content: space-around;">
			<template>
				<view class="staItem bg1" style="margin-top: 30upx;width: 19%;">
					<!-- <image class="stasBg" src="/static/index/gaodu.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">区块高度</text>
						<text class="stasText">{{filData.blockHeight || 0.00}}</text>
					</view>
				</view>
			</template>
			
			<template>
				<view class="staItem bg2" style="margin-top: 30upx;width: 27%;">
					<!-- <image class="stasBg" src="/static/index/suanli.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">全网有效算力&nbsp;&nbsp;&nbsp;</text>
						<text class="stasText">{{filData.storagePower || 0.00}}</text>
					</view>
				</view>
			</template>
			
			<template>
				<view class="staItem bg3" style="margin-top: 30upx;width: 21%;">
					<!-- <image class="stasBg" src="/static/index/kuangong.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">活跃矿工数&nbsp;&nbsp;&nbsp;</text>
						<text class="stasText">{{filData.activeMiners || 0.00}}</text>
					</view>
				</view>
			</template>
			
			<template>
				<view class="staItem bg4" style="width: 19%;">
					<!-- <image class="stasBg" src="/static/index/gaodu.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">每区块奖励</text>
						<text class="stasText">{{filData.blockReward || 0.00}}</text>
					</view>
				</view>
			</template>
			
			<template>
				<view class="staItem bg5" style="width: 27%;">
					<!-- <image class="stasBg" src="/static/index/suanli.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">24h平均挖矿收益</text>
						<text class="stasText">{{filData.averageReward || 0.00}}</text>
					</view>
				</view>
			</template>
			
			<template>
				<view class="staItem bg6" style="width: 21%;">
					<!-- <image class="stasBg" src="/static/index/kuangong.jpg" mode="scaleToFill"></image> -->
					<view style="display: flex;flex-direction: column;">
						<text class="stasText">近24h产出量</text>
						<text class="stasText">{{filData.production || 0.00}}</text>
					</view>
				</view>
			</template>
			
			
			
			
		</view>
		
		<view class="segHeader" style="margin-bottom: 30upx;" v-if="atcives.length>0">
			<image class="segImage" src="../../static/index/activity.png" mode="scaleToFill"></image>
			<text class="segTitle">活动中心</text>
		</view>
		
		<view class="ad-1" v-for="(item, itemIndex) in atcives" :key="itemIndex">
			<image :src="item.picTranslateText " mode="scaleToFill" ></image>
		</view>
		
	</view>
</template>

<script>
	import gbroMarquee from '@/components/gbro-marquee/marquee.vue'
	import {
		getCommonBanner,
		getCommonFilPrice,
		getCommonFilOfficialData,
		getCommonNotice,
		getCommonHdNew
	} from '@/services/index.service.js'
	export default {
		components: {
			gbroMarquee
		},
		data() {
			return {
				title: 'Hello',
				index:0,
				current:0,
				autoplay:true,
				indicator_dots:true,
				interval:3000,
				circular:true,
				indicator_active_color:"#353535",
				token:'',
				banner:[],
				filPrice:{},
				notice:[],
				noticeTitles:[],
				broadcastStyle: {
					speed: 8, 
					font_size: "32", //字体大小(rpx)
					text_color: "#333", //字体颜色
				},
				service: [{
						icon: '/static/index/service/kaohe.png',
						name: '投资者考核',
						
					},
					{
						icon: '/static/index/service/wenti.png',
						name: '常见问题',
						
					},
					{
						icon: '/static/index/service/guanwang.png',
						name: 'IPFS官网',
						
					},
					{
						icon: '/static/index/service/yaoqing.png',
						name: '邀请',
						
					}
				],
				filData:{},
				atcives:[],
				stasData: [{
						icon: '/static/index/A1.jpg',
						name: '平均服务人数',
						count:"ddfd"
					},
					{
						icon: '/static/index/A2.jpg',
						name: '已安全运营',
						count:"d迭代"
					},
					{
						icon: '/static/index/A3.jpg',
						name: '累计交易额',
						count:"ddfd"
					},
					
					{
						icon: '/static/index/A3.jpg',
						name: '累计交易额',
						count:"ddfd"
					},
					
					{
						icon: '/static/index/A3.jpg',
						name: '累计交易额',
						count:"ddfd"
					},
					
					{
						icon: '/static/index/A3.jpg',
						name: '累计交易额',
						count:"ddfd"
					}
				],
				bottomBanner:[
					{pic:'/static/index/ads.jpg'},
					{pic:'/static/index/ads.jpg'},
					{pic:'/static/index/ads.jpg'}
				]
				
			}
		},
		onLoad() {
			//this.getBanner(token);
			// var that=this;
			// that.checkToken();
		},
		onShow(){
			var that=this;
			that.checkToken();
		},
		methods: {
			choice(index){
				this.current=index,
				this.index=index
			},
			msgTap(e){
				uni.navigateTo({
					url:"msgList"
				})
			},
			serviceSelected(info) {
				if (info.name == "IPFS官网") {
					// #ifdef APP-PLUS
					plus.runtime.openURL("https://ipfs.io/");
					// #endif  
				}
				else if (info.name == "邀请") {
					uni.navigateTo({
						url:'yaoqing'
					})
				}
				else  {
					uni.navigateTo({
						url:'weikaitong'
					})
				}
			},
			checkToken(){
				var that=this;
				 uni.getStorage({
				    key: 'token',
				    success: function (res) {
						console.log(res.data);
						that.getBanner(res.data);
						that.getFilPrice(res.data);
						that.getFilData(res.data);
						that.getNotice(res.data);
						that.getNew(res.data);
				    },
					fail:function(error){
						uni.navigateTo({
							url: `/pages/login/login`
						})
					}});
			},
			//首页轮播图 /prefix-config/core/api/v1/common/banner
			async getBanner(token){
				const {data}  = await getCommonBanner({loc:'sy'})
				this.banner = data;
			},
			//FIL 价格与涨幅
			async getFilPrice(token){
				const { data } = await getCommonFilPrice()
				this.$set(this.filPrice,'priceBn',Number(data.priceBn));
				this.$set(this.filPrice,'priceHuobi',Number(data.priceHuobi));
				this.$set(this.filPrice,'priceOkex',Number(data.priceOkex));
				this.$set(this.filPrice,'changeBn',Number(data.changeBn.replace('%','')));
				this.$set(this.filPrice,'changeHuobi',Number(data.changeHuobi));
				this.$set(this.filPrice,'changeOkex',Number(data.changeOkex));
			},
			//FIL 官方数据
			async getFilData(token){
				const { data } = await getCommonFilOfficialData()
				this.filData = data;
			},
			//获取首页通知
			async getNotice(token){
				const { data} = await getCommonNotice()
				data.forEach((v, i) => this.noticeTitles.push(v.noticeTitle))
				
				this.notice = data;
			},
			//获取活动列表
			async getNew(token){
				const { data} = await getCommonHdNew()
				this.atcives = data;
			},
		}
		
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		// align-items: center;
		// justify-content: center;
		background-color: #F2F2F2;
	}
	.bannerBG {
		width: 100%;
		height: 280upx;
		background-color: #12B3F9;
		border-radius:0upx 0upx 30upx 30upx;
	}
	.pictrue{
		margin-top: 20rpx;
	}
	.pictrue swiper-item{
		width: 90%;
		height: 90%;
		display: flex;
		justify-content: center;
	}
	.pictrue image{
		width: 90%;
		height: 100%;
		/* box-shadow: 0rpx 20rpx 10rpx 0rpx #c7c7c7; */
		border-radius: 15rpx;
	}
	.msgContent {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin-top: 68upx;
		margin-bottom: 40upx;
		width: 100%;
		
		.msgLeft {
			padding-left: 4%;
			padding-right: 4%;
			width: 80%;
			display: flex;
			flex-direction: row;
			flex-shrink: 1;
			align-items: center;
			
			.titleImage {
				width: 40upx;
				height: 40upx;
			}
			
			.msgcontent {
				margin-left: 20upx;
				font-size: $uni-font-size-sm;
				// display: flex;
				// flex-direction: row;
				// justify-content: center;
				overflow:hidden; //超出的文本隐藏
				text-overflow:ellipsis; //溢出用省略号显示
				white-space:nowrap; //溢出不换行
				// margin-right: 90upx;
			}
		}
		
		.more {
			padding-right: 4%;
			flex-shrink: 0;
			font-size: $uni-font-size-sm;
		}
		
	}
	
	.stastic {
		width: 92%;
		margin-left: 4%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-start;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 21px 0px rgba(103, 103, 103, 0.2);
		border-radius: 20upx;
		margin-bottom: 20upx;
		flex-wrap: nowrap;
		// margin-top: 20upx;
		
		.item {
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.topBage {
				display: flex;
				align-items: center;
				justify-content: center;
				
				.bage {
					height: 30upx;
					width: 30upx;
					// border-radius: 2upx;
					margin-right: 6upx;
				}
				
				.title {
					font-size: $uni-font-size-sm;
					color: #656565;
				}
			}
			
			.count {
				color: green;
			}
			
			.up {
				color: green;
			}
			
			.down {
				color: red;
			}
			
			.textaligin {
				text-align: center;
			}
		}
	}
	.segHeader {
		display: flex;
		flex-direction: row;
		justify-content: flex-start;
		align-items: center;
		width: 92%;
		margin-left: 4%;
		
		.segImage {
			width: 40upx;
			height: 40upx;
		}
		
		.segTitle {
			margin-left: 20upx;
			font-size: $uni-font-size-sm;
		}
	}
	
	.welfare {
		width: 92%;
		// white-space: nowrap;
		margin-left: 4%;
		margin-right: 4%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 1px 21px 0px rgba(103, 103, 103, 0.2);
		border-radius: 20upx;
		margin-bottom: 20upx;
		flex-wrap: wrap;
		margin-top: 20upx;
		padding-bottom: 20upx;
		
		.stas {
			margin-right: 60upx;
			width: 20%;
			color: white;
			font-size: $uni-font-size-base;
			// border: 30upx;
			padding: 30upx;
		}
		
		.staItem {
			margin-bottom: 20upx;
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			border-radius: 10upx;
			// padding: 20upx 10upx;
			
			.stasText {
				color: white;
				font-size: $uni-font-size-sm;
				text-align: center;
			}
			
			.stasBg {
				width: 200upx;
				height: 120upx;
				border-radius: 20upx;
			}
		}

		.item {
			padding: 30upx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			
			.border {
				margin-top: 10upx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
	
				.img {
					// border: 4upx solid #c9ac7a;
					border-radius: 50%;
					width: 108upx;
					height: 108upx;
				}
				
				
			}
	
			.txt {
				margin-top: 10upx;
				font-size: $uni-font-size-sm;
				// font-weight: 300;
				color: #323232;
			}
		}
	}
	
	.ad-1 {
		width: 92%;
		height: 120upx;
		padding-left: 4%;
		margin-bottom: 30upx;
		;
	
		image {
			width: 100%;
			height: 100%;
			border-radius: 20upx
		}
	}
	.bg1 {
		background-image: url(../../static/index/gaodu.jpg);
	}
	.bg2 {
		background-image: url(../../static/index/suanli.jpg);
	}
	.bg3 {
		background-image: url(../../static/index/kuangong.jpg);
	}
	.bg4 {
		background-image: url(../../static/index/jiangli.png);
	}
	.bg5 {
		background-image: url(../../static/index/shouyi.png);
	}
	.bg6 {
		background-image: url(../../static/index/changchu.png);
	}
	
</style>
